<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 解构赋值
      // 1.数组的解构
      // ES5:
      // var arr = ["张安","李四","王五"];
      // var a = arr[0];
      // var b = arr[1];
      // var c = arr[2];
      // console.log(a,b,c);

      // ES6
      // var arr = ["张安","李四","王五"];
      // // a、b、c和数组是一一对应关系 ，且是自定义的；
      // let [a,b,c] = arr;
      // console.log(a,b,c);

      // 数组解构参数；
      // ES5
      // function fn(myarr){
      //     let a = myarr[0];
      //     let b = myarr[1];
      //     let c = myarr[2];
      //     console.log(a,b,c);
      // }
      // ES6
      // function fn([a,b,c]){
      //     console.log(a,b,c);
      // }
      // var arr = ["张安","李四","王五"];
      // fn(arr);

      // 2.对象的解构 ；
      // var obj = {
      //     name:"张三",
      //     age:20,
      //     height:"180cm"
      // }
      // ES5;
      // var name = obj.name;
      // var age = obj.age;
      // var height = obj.height;
      // console.log(name,age,height);
      // ES6；
      // let {name:names,age:ages,height:heights} = obj;
      // console.log(names,ages,heights);
      // 最常用的解构
      // 如果对象的键名和键值相同了，那么可以省略一个
      // let myname = "张三";
      // let age = 20;
      // let height = "180cm";
      // let obj = {
      //     myname:"张三",
      //     age:20,
      //     height:"178cm"
      // }
      // // console.log(obj);

      // let {myname,age,height} = obj;
      // console.log(myname,age,height);

      // 对象的深层次解构 ；
      // 要保持和原本对象的结构一致就可以了；
      var obj = {
        name: "张三",
        obj2: {
          height: "179cm",
        },
      };

      // let {name:name,obj2:{height:height}} = obj;
      // console.log(name,height);

      function fn({ name, obj2: { height } }) {
        console.log(name, height);
      }
      fn(obj);

      // 总结 ： 数组 及 对象的解构  ； 1.深层次解构 2. 函数参数里的解构 ；
    </script>
  </body>
</html>
